<template>
	<view :class="[primarySize()]">
		<view class="container bg-white">
			<view class="plr67">
				<view class="title">1/8 选择岗位类型</view>
				<view class="info pt10">给岗位选择一个相应的职位类型！</view>
				<view class="tab_nav flex-box">
					<view class="flex-grow-1" :class="[job.type==2?'active':'']" @click="bindJobTypeChange(2)">兼职
					</view>
					<view class="flex-grow-1" :class="[job.type==1?'active':'']" @click="bindJobTypeChange(1)">全职
					</view>
				</view>
			</view>
			<view class="block_main">
				<view class="flex-box block_item">
					<view class="flex-grow-1">
						<input type="text" @input="bindJobNameInput" v-model="job.job_name" maxlength="20"
							placeholder="填写职位名称" placeholder-class="cold7"></input>
					</view>
				</view>
				<view class="flex-box block_item">
					<view class="flex-grow-1">
						<input type="number" @input="bindNumInput" v-model="job.num" placeholder="填写招聘人数"
							placeholder-class="cold7"></input>
					</view>
					<view>人</view>
				</view>
				<view class="flex-box block_item">
					<multi-select class="picker" :items="jobCategories" name_key="category_name"
						children_key="childlist" v-model="job.job_category_id" @change="bindJobCategoryChange">
						<view class="flex-box">
							<view class="flex-grow-1" :class="[categoryPath?'picker':'cold7']">
								{{categoryPath || '选择行业类别'}}
							</view>
							<image src="@/static/public/arrow-r.png" mode="widthFix" class="ico12 ml10"></image>
						</view>
					</multi-select>
				</view>
			</view>
			<button @click="bindNextStep" class="upload_btn mt115" hover-class="none">下一步</button>

		</view>
	</view>
</template>

<script>
	const app = getApp();
	var validate = require("../../xilu/validate.js");
	export default {
		data() {
			return {
				job: {
					type: 1
				},
				jobCategories: [],
				categoryPath: '',
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad: function(options) {
			let page = this;
			let jobId = options.id;
			this.$util.getJobCategories().then(categories => {
				page.jobCategories = categories
				if (jobId) {
					this.$core.get({
						url: '/xilujob.job_manage/edit/id/' + jobId,
						success(ret) {
							let job = ret.data.job;
							for (let key in job.job_info) {
								if (job.job_info.hasOwnProperty(key)) {
									job[key] = job.job_info[key]
								}
							}
							delete job['job_info'];
							page.job = job
						}
					});
				} else {
					this.$core.get({
						url: '/xilujob.job_manage/add',
						success: ret => {
							page.job = ret.data.job
						}
					});
				}
			});
		},
		methods: {
			bindJobTypeChange(type) {
				this.job.type = type
			},
			bindJobNameInput: function(event) {
				this.job.job_name = event.detail.value
			},
			bindNumInput: function(event) {
				this.job.num = event.detail.value
			},
			bindJobCategoryChange(event) {
				let selectedItems = event.items,
					selectedItem = selectedItems[selectedItems.length - 1];
				// if (event.isManual) {
				this.job.job_category_id = selectedItem.id
				// }
				// 设置显示名称
				let path = [];
				selectedItems.forEach(function(item) {
					path.push(item.category_name);
				});
				path = path.join(' | ');
				this.categoryPath = path
			},
			bindNextStep: function() {
				
				let job = {
				  "type": this.job.type,
				  "job_name": this.job.job_name,
				  "num": this.job.num,
				  "job_category_id": this.job.job_category_id,
				};
				var rule = [
					{
						name: 'type',
						rules: ['require', 'range:1,2'],
						errorMsg: {
							require: '请选择职位类型'
						}
					},
					{
						name: 'job_name',
						rules: ['require'],
						errorMsg: {
							require: '请填写职位名称'
						}
					},
					{
						name: 'num',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '请填写招聘人数',
							gt: '请填写招聘人数'
						}
					},
					{
						name: 'job_category_id',
						rules: ['require'],
						errorMsg: {
							require: '请选择职位分类'
						}
					},
				];
				if (!validate.check(job, rule)) {
					uni.showToast({title: validate.getError()[0],icon: 'none'});
					return;
				}
				uni.navigateTo({
					url: '/pages/company/post1',
					success: res => {
						res.eventChannel.emit("jobTransfer", this.job);
					}
				});
			},
		}
	}
</script>

<style scoped>
	.plr67 {
		padding-left: 67rpx;
		padding-right: 67rpx;
	}

	.title {
		font-size: 44rpx;
		color: #333;
		padding-top: 117rpx;
	}

	.info {
		font-size: 24rpx;
		padding-bottom: 60rpx
	}

	.tab_nav {
		line-height: 89rpx;
		text-align: center;
		margin-top: 92rpx;
	}

	.tab_nav view {
		border: 1rpx solid #E1E1E1
	}

	.tab_nav .active {
		background-color: var(--primary);
		color: #fff;
		border: 1rpx solid var(--primary);
	}

	.mt115 {
		margin-top: 115rpx;
	}

	/* 输入框 */
	.block_main {
		margin-top: 50rpx;
		padding-left: 67rpx;
		padding-right: 67rpx;
	}

	.block_item {
		width: 100%;
		border-bottom: 1rpx solid #E1E1E1;
		margin-top: 40rpx;
	}

	.block_item input {
		height: 85rpx;
		line-height: 85rpx;
		width: 100%
	}

	.block_item .picker {
		height: 85rpx;
		line-height: 85rpx;
		width: 100%
	}

	.upload_btn {
		border-radius: 10rpx;
		width: 100%;
		height: 87rpx;
		line-height: 87rpx;
		background-color: var(--primary);
		font-size: 30rpx;
		color: #fff;
	}

	.tab_nav::after {
		display: none
	}

	.upload_btn {
		margin-left: 67rpx;
		margin-right: 67rpx;
		width: auto;
		display: block
	}
</style>